<!DOCTYPE html>
<html>
<head>
    <title>结算详细--中软高科-2015</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/style.css"/>
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }

        #total, #pages, #curPage {
            color: #1EABFF;
            padding: 0 5px;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            // 分页点击事件
            let $page = $("div[class='pagination']>ul>li");
            $page.click(function () {
                if (($(this).attr("class")) === 'disabled') {
                    return;
                }
                let num = $(this).attr("name");
                $("input[name='pageNum']").val(num);
                loadData();
            });

            loadData();
        });

        String.prototype.GetValue = function (para) {
            let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
            let r = this.substr(this.indexOf("\?") + 1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        function loadData() {
            let $pageNum = $("input[name='pageNum']");
            let $pageSize = $("input[name='pageSize']");

            let url = document.location.toString();

            let behId = $("input[name='behId']").val();
            console.log("pre, behId = " + behId);
            if (behId == "0") {
                behId = url.GetValue("behId");
                console.log("after, behId = " + behId);
                $("input[name='behId']").val(behId);
            }

            // 设置分页参数
            let pageNum = url.GetValue("pageNum");
            let pageSize = url.GetValue("pageSize");
            if (pageNum == null) {
                pageNum = $pageNum.val();
            }
            if (pageSize == null) {
                pageSize = $pageSize.val();
            }

            $.ajax({
                type: "GET",
                url: "/be-hosipital/detail",
                dataType: "json",
                data: {
                    behId,
                    pageNum,
                    pageSize
                },
                success: function (res) {
                    console.log(res);
                    if (res.code === 200) {
                        let list = res.pageInfo.list;
                        let str = "";
                        for (let i = 0; i < list.length; i++) {
                            let obj = list[i];
                            let behId = obj.behId;
                            let hosrName = obj.reg.hosrName;
                            let chapName = obj.chargeproject.chapName;
                            let chapMoney = obj.chargeproject.chapMoney;
                            let chapTime = obj.chargeproject.chapTime == null ? '' : obj.chargeproject.chapTime;

                            str += '<tr>' +
                                '            <td>' + behId + '</td>' +
                                '            <td>' + hosrName + '</td>' +
                                '            <td>' + chapName + '</td>' +
                                '            <td>' + chapMoney + '</td>' +
                                '            <td>' + chapTime + '</td>' +
                                '</tr>'

                            if (i == 0) {
                                $("#totalPayment").html(obj.totalPayment);
                                let totalPayment = obj.totalPayment == null ? 0 : obj.totalPayment;
                                let behAntecedent = obj.behAntecedent == null ? 0 : obj.behAntecedent;
                                let totalAntecedent = behAntecedent - totalPayment;
                                console.log("totalAntecedent = " + totalAntecedent);
                                $("#totalAntecedent").html(behAntecedent);
                                $("#balance").html(totalAntecedent);
                            }
                        }
                        if (str == "") {
                            let msg = "暂无数据";
                            str = '<tr align="center">' +
                                '            <td colspan="5">' + msg + '</td>' +
                                '</tr>'
                        }
                        $("#tboby").html(str);
                        // 填充分页数据
                        fillPageData(res.pageInfo);
                    } else {
                        alert("系统开小差了");
                    }
                }
            });
        }

        // 填充分页信息
        function fillPageData(pageInfo) {
            //填充信息
            $("#total").html(pageInfo.total);
            $("#pages").html(pageInfo.pages);
            $("#curPage").html(pageInfo.pageNum);
            $("input[name='pageNum']").val(pageInfo.pageNum);
            $("select[name='pageSize']").val(pageInfo.pageSize);
            //设置按钮的属性值和样式
            $("#firstPage").attr("name", 1);
            $("#prePage").attr("name", pageInfo.prePage);
            $("#nextPage").attr("name", pageInfo.nextPage);
            $("#lastPage").attr("name", pageInfo.pages);
            $("#firstPage").removeClass("disabled");
            $("#prePage").removeClass("disabled");
            $("#nextPage").removeClass("disabled");
            $("#lastPage").removeClass("disabled");
            if (pageInfo.isFirstPage) {//如果是第一页：上一页和首页禁用
                $("#firstPage").addClass("disabled");
                $("#prePage").addClass("disabled");
            }
            if (pageInfo.isLastPage) {//如果已经是最后一页：下一页和末页禁用
                $("#nextPage").addClass("disabled");
                $("#lastPage").addClass("disabled");
            }

            // 删除原有内容
            $(".pageNode").remove();

            // 添加新内容
            let prePage = $("#prePage");
            // 设置页签
            let navigatepageNums = pageInfo.navigatepageNums;
            var s = "";
            navigatepageNums.map(index => {
                let curPageClass = pageInfo.pageNum == index ? 'color: red' : '';
                s +=
                    `<li class="pageNode" name="${index}" onclick="pageChange(${index})"><a href="#" style="${curPageClass}">${index}</a></li>`;
            });
            prePage.after(s);
        }

        function pageChange(mode) {
            $("input[name='pageNum']").val(mode);
            loadData();
        }

        function exportExcel() {

            let $pageNum = $("input[name='pageNum']");
            let $pageSize = $("input[name='pageSize']");

            let url = document.location.toString();

            let behId = $("input[name='behId']").val();
            if (behId == "0") {
                behId = url.GetValue("behId");
                console.log("after, behId = " + behId);
                $("input[name='behId']").val(behId);
            }

            // 设置分页参数
            let pageNum = url.GetValue("pageNum");
            let pageSize = url.GetValue("pageSize");
            if (pageNum == null) {
                pageNum = $pageNum.val();
            }
            if (pageSize == null) {
                pageSize = $pageSize.val();
            }

            const xhr = new XMLHttpRequest();
            xhr.open('POST', "/be-hosipital/detail/export", true);
            //定义responseType='blob', 是读取文件成功的关键，这样设置可以解决下载文件乱码的问题
            xhr.responseType = "blob";
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onload = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const link = document.createElement("a");

                    // let blob = new Blob(["\ufeff", xhr.response], {type: "multipary/form-data"});
                    console.log(xhr.response)
                    // console.log(blob)

                    link.style.display = "none";
                    // link.href = URL.createObjectURL(blob);
                    link.href = URL.createObjectURL(xhr.response);
                    link.setAttribute("download", decodeURI('cux0export.xlsx'));
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            }

            xhr.send(`behId=${behId}&pageNum=${pageNum}&pageSize=${pageSize}`);
        }

        function checkall() {
            var alls = document.getElementsByName("check");
            var ch = document.getElementById("checkall");
            if (ch.checked) {
                for (var i = 0; i < alls.length; i++) {
                    alls[i].checked = true;
                }
            } else {
                for (var i = 0; i < alls.length; i++) {
                    alls[i].checked = false;
                }
            }
        }

        function delAll() {
            var alls = document.getElementsByName("check");
            var ids = new Array();
            for (var i = 0; i < alls.length; i++) {
                if (alls[i].checked) {
                    ids.push(alls[i].value);
                }
            }
            if (ids.length > 0) {
                if (confirm("确认操作?")) {
                    alert("成功!");
                }
            } else {
                alert("请选中要操作的项");
            }
        }

        $(function () {
            $('#backid').click(function () {
                window.location.href = "charge2.html";
            });
        });
    </script>
</head>
<body>

<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
        <th>收费项目管理</th>
        <th>项目名称</th>
        <th>收费项目</th>
        <th>收费金额</th>
        <th>检查日期</th>
    </tr>
    </thead>
    <tbody id="tboby">
    <tr>
        <td style="vertical-align:middle;" colspan="5">暂无数据</td>
    </tr>
    </tbody>
</table>

<input name="behId" value="0" type="hidden">
<input name="pageNum" value="1" type="hidden">
<input name="pageSize" value="5" type="hidden">
<!-- 2.分页部分 -->
<div class="form-group" style="float: right">
    <div class="col-sm-3" style="float: right; margin-right: 24px">
        <div class="pagination">
            <ul>
                <li name="pageLi" id="firstPage"><a href="javascript:void(0)">首页</a></li>
                <li name="pageLi" id="prePage"><a href="javascript:void(0)">上一页</a></li>
                <li name="pageLi" id="nextPage"><a href="javascript:void(0)">下一页</a></li>
                <li name="pageLi" id="lastPage"><a href="javascript:void(0)">末页</a></li>
            </ul>
        </div>
    </div>
    <div class="col-sm-1" style="float: right; padding-top: 5px; margin-right: 24px">
        <div class="pagination">
            <ul>
                共<span id="total"></span>条数据, 共<span id="pages"></span>页,当前第<span id="curPage"></span>页
            </ul>
        </div>
    </div>
</div>

<!-- 其他按钮 -->
<div style="float: left; margin-left: 25px; margin-top: 20px">
    <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
    <button type="button" class="btn btn-success" onclick="exportExcel()">导出excel</button>
</div>

<!-- 汇总数据 -->
<table class="table table-bordered table-hover definewidth m10">
    <tr>
        <td width="10%" class="tableleft">总花费(元)：</td>
        <td id="totalPayment">无</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">押金(元)：</td>
        <td id="totalAntecedent">无</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">余额(元)：</td>
        <td id="balance">无</td>
    </tr>
</table>

</body>
</html>
